<template>
  <div class="ref">
    <input v-model="name"/>
    <h1>{{ name }}</h1>
    <div>
      <h1>对象</h1>
      <span>{{ obj }}</span>
      <span>{{ obj1 }}</span>
      <button @click="objecChange">测试</button>
    </div>
  </div>
</template>
<script lang='ts' setup name="ref">
  import { ref, reactive } from 'vue'
  let name = ref('测试')
  let obj = ref({
    a: '1',
    b: '2'
  })
  let obj1 = reactive({
    a: '1',
    b: '2'
  })

  const objecChange = () => {
    obj1.a = '2'
  }

</script>
<style lang='scss'>
.ref {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
